<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>registerBuyer</title>
    <link rel="StyleSheet" href="../css/login.css" type="text/css" media="screen" />
    <link rel="StyleSheet" href="../css/common.css" type="text/css" media="screen" />
    <script src="https://kit.fontawesome.com/58cb2985af.js" crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div th:replace="common/top"></div>

<div id="w">
    <div class="content" id="popLayer" style="text-align: center;background-color: #ffffff;">
        <span class="cartMsg">提示</span>
    </div>
    <div class="registerContent">
        <div class="registerTitle">
            <p class="title">Register-buyer</p>
        </div>
        <div th:if="${errorMsg} != null" class="errorContent">
            <p th:text="${errorMsg}" id="error" name="error" style="text-align: center;">error</p>
        </div>
        <form action="/user/registerByPhone" class="registerForm" method="post">
            <table class="registerList">
                <tr>
                    <td class="listName">用户名： </td>
                    <td class="listContent">
                        <input type="text" class="registerFormInput" name="username" id="username">
                        <span id="usernameError"></span>
                    </td>
                </tr>

                <tr>
                    <td class="listName">密  码：</td>
                    <td class="listContent">
                        <input type="password" class="registerFormInput" name="password" id="password">
                    </td>
                </tr>

                <tr>
                    <td class="listName">手机号：</td>
                    <td class="listContent">
                        <input type="text" class="registerFormInput" name="phoneNumber" id="phoneNumber" oninput="value=value.replace(/[^\d]/g,'')">
                    </td>
                </tr>

                <tr>
                    <td class="listName">短信验证码：</td>
                    <td class="listContent">
                        <input type="text" class="registerFormInputCode" name="phoneCode" id="phoneCode">
                        <button type="button" class="registerObtain">Obtain</button>
                    </td>
                </tr>
            </table>

            <div class="registerFormItem">
                <input type="submit" class="registerFormSubmit" value="register">
            </div>

            <div class="registerFormLink">
                <a href="/user/registerByGitee" class="link1">第三方注册</a>
                <a href="/user/loginByNameForm" class="link2">返回登录</a>
            </div>
        </form>
    </div>
</div>

<div th:replace="common/bottom"></div>

<script src="../js/sendPhoneCodeForRegister.js"></script>
<script src="../js/registerErrorMsg.js"></script>
<script>
        // 获取input元素
        var $usernameInput = $('#username');
        // 监听input失去焦点事件
        $usernameInput.on('blur', function() {
            // 获取用户名
            var username = $(this).val();
            console.log(username);
            // 发送GET请求
            $.ajax({
                url: 'http://localhost:8080/user/findUserByUsername',
                method: 'GET',
                data: { username: username },
                success: function(response) {
                    console.log('coming');
                    if (response.status === 1) {
                        // 如果status为1，则显示错误信息
                        var errorMsg = response.message;
                        $("#usernameError").text(errorMsg).show();
                    } else {
                        // 否则隐藏错误信息
                        $("#usernameError").hide();
                    }
                },
                error: function(xhr, status, error) {
                    console.log("An error occurred during AJAX call: ", xhr.responseText);
                }
            });
        });
</script>
</body>
</html>